<template>
  <view class="container .container-login">
    <view class="bg-color">
      <image class="default" src="/static/images/12.png"></image>
      <view class="fw-bold fs-32 cl-1e262f mt-24">未绑定手机号</view>
      <view class="fs-28 cl-light-txt mt-16">
        绑定后可提高账号安全性。
      </view>
      <view class="column align-center">
        <button
          class="login-type"
          :loading="loading"
          open-type="getPhoneNumber"
          @getphonenumber="getPhoneNumber"
        >
          立即绑定
        </button>
        <view class="back" @tap="back">返回</view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { computed, ref } from 'vue'
  import { hideLoading, msg, showLoading } from '../../utils/tools'
  import { onLoad, onUnload } from '@dcloudio/uni-app'
  import {
    accountUserInfo,
    bindAccountSys,
    firstLoginAndBind,
  } from '../../api/login'
  import { useStore } from 'vuex'
  import { SET_TGT_TOKEN, SET_USER_INFO } from '@/store/types'
  import { uploadUserInfo } from '@/api/auth'
  import { useClearLoginChannelRelations } from '@/hooks/hooks'
  import uma from '@/utils/uma'
  import { OPENID } from '@/utils/storageTypes'
  import { getUserInfoFromAccountSys } from '@/hooks/useSaveUserInfo'

  const store = useStore()
  const authCode = ref('')
  const loading = ref(false)
  const userInfo = computed(() => store.state.user.userInfo)
  const { commit } = store
  onLoad((e) => {
    console.log(e)
    authCode.value = e.authCode || ''
  })

  const tgt = computed(() => store.state.user.TGT)
  onUnload(() => {
    if (!tgt.value) {
      useClearLoginChannelRelations()
    }
  })
  // 绑定手机号
  const getPhoneNumber = async (e: any) => {
    loading.value = true
    showLoading()

    if (!e.detail.encryptedData) {
      loading.value = false
      return hideLoading()
    }
    const param = {
      authCode: authCode.value,
      encryptedData: e.detail.encryptedData,
      iv: e.detail.iv,
    }
    uma.trackEvent('mobile', { title: '同意授权' })
    try {
      const { code, data, msg } = await firstLoginAndBind(param)
      if (+code === 200 && data.tgt) {
        store.commit(`user/${SET_TGT_TOKEN}`, data.tgt)
        uni.setStorageSync('threePartLoginData', data)
        await getUserInfoFromAccountSys(data.tgt, authCode.value)
        loading.value = false
      }

      if (+code === 200 && !data.tgt) {
        loading.value = false
        hideLoading()
        return msg('请前往App进行实名认证之后再进行登录')
      }
    } catch (e) {
      uma.trackEvent('accredit_TEL_N', {})
      loading.value = false
      hideLoading()
      return msg('手机号绑定失败')
      //TODO handle the exception
    }
  }

  const back = () => {
    uma.trackEvent('mobile', { title: '拒绝授权' })
    uni.navigateBack({})
  }
</script>

<style lang="scss">
  .container-login {
    background-color: #408af7;
    border-radius: unset;
    height: 100%;
  }

  .bg-color {
    background-color: #fff;
    padding: 40px 0;
    border-radius: 12px 12px 0 0;
    height: 100vh;
    text-align: center;
  }

  .default {
    margin-top: 80rpx;
    width: 360rpx;
    height: 240rpx;
  }

  .cl-light-txt {
    color: rgba(30, 38, 47, 0.4);
  }
  .login-type {
    margin-top: 80rpx;
    width: 686rpx;
    height: 88rpx;
    background-image: linear-gradient(-45deg, #75befc 0%, #408af7 100%);
    box-shadow: 0 8rpx 16rpx 0 rgba(64, 138, 247, 0.3);
    border-radius: 44rpx;
    border: unset !important;
    font-weight: 500;
    font-size: 30rpx;
    color: #ffffff;
    text-align: center;
  }
  .back {
    margin-top: 30rpx;
    width: 686rpx;
    height: 88rpx;
    background: #f8f8f8;
    border-radius: 44rpx;
    font-weight: 500;
    font-size: 30rpx;
    color: #1e262f;
    text-align: center;
    opacity: 0.8;
    line-height: 88rpx;
  }
  button:after {
    border: unset !important;
  }
</style>
